<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>内邓高速扫码报警</title>
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/reset.css">
		<!--<link rel="stylesheet" href="css/style.css">-->
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" href="element/element.css" />
		<script src="element/element.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=s01fm4Rbo6494DuwCOkSfM5AHU7DAS6a&s=1"></script>
		<!--<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=s01fm4Rbo6494DuwCOkSfM5AHU7DAS6a"></script>-->
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
			font-size: .35rem;
		}
		
		html,
		body {
			width: 100%;
			height: 100%;
		}
		
		.title {
			height: 45px;
			line-height: 45px;
			text-align: center;
			color: #fff;
			background: #44679f;
		}
		
		.el-form-item {
			margin-bottom: 15px!important;
		}
		
		.box .el-form-item__label {
			height: 30px!important;
		}
		
		.querybtn {
			-webkit-border-radius: 6px;
			/*适配以webkit为核心的浏览器(chrome、safari等)*/
			-moz-border-radius: 6px;
			/*适配firefox浏览器*/
			-ms-border-radius: 6px;
			/*适配IE浏览器*/
			-o-border-radius: 6px;
			/*适配opera浏览器*/
			border-radius: 6px;
			/*适配所有浏览器*/
			border: 0;
			outline: none;
		}
		
		button :focus {
			outline: 0;
		}
		
		.remindContent {
			font-size: 26px;
			color: #f00;
			/*height: 50px;*/
			line-height: 50px;
			padding: 0 10px;
		}
		
		.tipstext {
			/*height: 40px;*/
			line-height: 50px;
			padding: 0 10px;
		}
		
		[v-cloak] {
			display: none;
		}
	</style>

	<body>
		<div id="app" v-cloak>
			<p class="title">内邓高速扫码报警</p>
			<el-form v-show="show1" ref="form" label-width="90px" style="padding: 0 10px;margin-top: 20px;">
				<el-form-item label="你的位置" required>
					<el-input v-model="name"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" required>
					<el-input v-model="phone" type="number" placeholder="请输入手机号码"></el-input>
				</el-form-item>
				<el-form-item label="车辆类型" class="box"></el-form-item>
				<el-checkbox-group v-model="cartype">
					<el-row>
						<el-col :span="8">
							<el-checkbox label="轿车" name="type" style="margin: 10px;"></el-checkbox>
						</el-col>
						<el-col :span="8">
							<el-checkbox label="客车" name="type" style="margin: 10px;"></el-checkbox>
						</el-col>
						<el-col :span="8">
							<el-checkbox label="货车" name="type" style="margin: 10px;"></el-checkbox>
						</el-col>
					</el-row>
				</el-checkbox-group>
				<el-form-item label="车辆数量" class="box"></el-form-item>
				<el-checkbox-group>
					<el-row>
						<el-col :span="12" style="text-align: center;">
							<el-radio v-model="carnum" label="单车">单车</el-radio>
							<!--<el-checkbox label="单车" name="type" style="margin: 10px;"></el-checkbox>-->
						</el-col>
						<el-col :span="12" style="text-align: center;">
							<el-radio v-model="carnum" label="多车">多车</el-radio>
						</el-col>
					</el-row>
				</el-checkbox-group>
				<el-form-item label="报警类型" class="box"></el-form-item>
				<el-checkbox-group v-model="type">
					<el-row>
						<el-col v-for="item in listtype" :span="12">
							<el-checkbox :label="item.typeName" name="type" style="margin: 10px;"></el-checkbox>
						</el-col>
					</el-row>
				</el-checkbox-group>
				<button class="querybtn" @click="callpolice" type="button" style="background: #44679f;font-size: 0.3rem;margin-left: 5%;padding: 0.2rem 1.5rem;color: #fff;border-radius: 100px;width: 90%;margin-top: 20px;">报警</button>
			</el-form>
			<div v-show="show2">
				<div style="text-align: center;margin-top: 40px;">
					<el-image v-if="show3 == true" style="width: 90px; height: 90px" src="image/red.png" fit="contain"></el-image>
					<el-image v-if="show3 == false" style="width: 90px; height: 90px" src="image/ss.png" fit="contain"></el-image>
					<p class="remindContent">{{ dataa.remindContent }}</p>
					<p v-if="show3 == true" class="tipstext" style="font-size: 20px;">等待接警，请勿关闭</p>
					<p v-if="show3 == true" class="tipstext" style="font-size: 16px;margin-top: 20px;">正在等待接警人员回应</p>
					<p v-if="show3 == true" class="tipstext">预计等待<span style="color: #f00;padding: 0 10px">{{ time }}</span>秒</p>

					<p v-if="show3 == false" class="tipstext" style="font-size: 22px;font-weight: 600;">{{ dataa.callPoliceTemporaryInformation.content }}</p>
					<p v-if="show3 == false" class="tipstext" style="font-size: 16px;margin-top: 20px;">已接警，马上联系你</p>
					<p v-if="show3 == false" class="tipstext" style="font-size: 16px;">请保持手机畅通，等待来电</p>
					<p v-if="show3 == false" class="tipstext" style="font-size: 16px;">可关闭页面，请勿重复报警</p>
				</div>
				<div style="text-align: center;position: fixed;bottom: 20px;width: 100%;">
					<p class="tipstext" style="color: #888484;font-size: 14px;">你的手机号： {{ phone }}</p>
					<p class="tipstext" style="color: #888484;font-size: 14px;">你的位置：{{ policedata.address }}</p>
				</div>
			</div>
			<el-form v-show="show" ref="form" :model="form" label-width="90px" style="padding: 0 10px;margin-top: 20px;">
				<el-form-item label="高速公路" prop="expressWayName">
					<el-input v-model="form.expressWayName" placeholder="请输入高速公路" />
				</el-form-item>
				<el-form-item label="桩号千米" prop="expressWayKil">
					<el-input type="number" v-model="form.expressWayKil" placeholder="请输入桩号千米" />
				</el-form-item>
				<el-form-item label="桩号米数" prop="expressWayMeter">
					<el-input type="number" v-model="form.expressWayMeter" placeholder="请输入桩号米数" />
				</el-form-item>
				<el-form-item label="经度" prop="lon">
					<el-input v-model="form.lon" oninput="value=value.replace(/[^\d^\.]/g,'')" placeholder="请输入经度" />
				</el-form-item>
				<el-form-item label="纬度" prop="lat">
					<el-input v-model="form.lat" oninput="value=value.replace(/[^\d^\.]/g,'')" placeholder="请输入纬度" />
				</el-form-item>
				<el-form-item label="方向类型">
					<el-radio-group v-model="form.direction">
						<el-radio key="1" label="1">上行</el-radio>
						<el-radio key="2" label="2">下行</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="提醒内容" prop="remindContent">
					<el-input v-model="form.remindContent" type="textarea" placeholder="请输入内容" />
				</el-form-item>
				<button class="querybtn" @click="save" type="button" style="background: #44679f;font-size: 0.3rem;margin-left: 5%;padding: 0.2rem 1.5rem;color: #fff;border-radius: 100px;width: 90%;margin-top: 20px;">添加</button>
			</el-form>
			<!--<div style="margin: .25rem;">				
				<p class="position" style="text-align: center;font-size: .5rem;">{{dataa.expressWayName}}K{{dataa.expressWayKil}}+{{dataa.expressWayMeter}}</p>
				<div style="padding-left: .4rem;margin-top: .5rem;">
					<span style="font-size: .4rem;">手机号 : </span><input id="ipt" type="text" placeholder="请输入手机号" oninput="iptchange(this)" style="border: 0;border-bottom: 1px solid #000;outline: none;padding-left: .48rem;width: 65%;" />
				</div>
				<button type="button" style="background: #44679f;font-size: 0.3rem;margin-left: 5%;margin-top: 1.3rem;padding: 0.2rem 1.5rem;color: #fff;border-radius: 100px;width: 90%;">报警</button>
			</div>		-->

		</div>
		<div id="allmap" style="display:none;">
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				pid: getQueryString('pid'),
//				httpurl: window.location.protocol + '//' + window.location.host+"/prod-api",
				httpurl: window.location.protocol + '//192.168.1.110:8080',
				dataa: {},
				type: [],
				policedata: [],
				carnum: [],
				cartype: [],
				phone: '',
				name: '',
				form: {
					lat: null,
					lon: null,
				},
				show: false,
				show1: true,
				show2: false,
				show3: true,
				listtype: '',
				time: 60,
				rules: {}
			},

			mounted() {
				this.getposition();
//				this.getCallPolice()
			},
			methods: {
				callpolice() {
					if((/^1[3456789]\d{9}$/.test(this.phone))) {
						$.ajax({
							type: 'post',
							url: this.httpurl + '/appWeb/alarm/' + this.pid,
							dataType: 'json',
							data: JSON.stringify({
								"direction": this.dataa.directionName, //道路方向
								"address": this.name, //位置描述
								"details": this.phone + ":" + this.type.join(',') + ',' + this.cartype.join(',') + ',' + this.carnum,
								"longitude": this.dataa.lon, //经度
								"latitude": this.dataa.lat //维度
							}),
							contentType: 'application/json',
							success: function(data) {
								if(data.code == 200) {
									vm.show1 = false;
									vm.show2 = true;
									vm.policedata = data.data;
									vm.waitingstate();
								}

							}
						})
					} else {
						this.$message.error('手机号格式不正确');
					}

				},
				waitingstate() {
					if(this.time > 0) {
						setTimeout(function() {
							vm.time = vm.time - 1;
							$.ajax({
								type: 'get',
								url: vm.httpurl + '/appWeb/getOrderStatus/' + vm.policedata.eId,
								dataType: 'json',
								success: function(data) {
									if(data.code == 200) {
										vm.show3 = false;
										vm.time = 60;
									} else {
										vm.waitingstate();
									}
								}
							})
						}, 1000)
					} else {
						this.show3 = false;
					}

				},
				save() {
					$.ajax({
						type: 'post',
						url: this.httpurl + '/appWeb/updateCallPolice/',
						dataType: 'json',
						data: JSON.stringify(this.form),
						contentType: 'application/json',
						success: function(data) {
							console.log(data.code)
							if(data.code == 200) {
								vm.$message({
				          message: '添加成功',
				          type: 'success'
				        });
							}

						}
					})
				},
				getposition() {
					$.ajax({
						type: 'get',
						url: this.httpurl + '/appWeb/getCallPoliceInfo/' + this.pid,
						dataType: 'json',
						success: function(data) {
							if(data.code == 200) {
								vm.dataa = data.data
								vm.name = vm.dataa.expressWayName + 'K' + vm.dataa.expressWayKil + '+' + vm.dataa.expressWayMeter + '+' + vm.dataa.directionName
							} else if(data.code == 601) {
								vm.show1 = false;
								vm.show = true;
								vm.getCallPolice();
							}
							console.log(vm.dataa)
						}
					})
					$.ajax({
						type: 'get',
						url: this.httpurl + '/appWeb/getAlarmType/' + this.pid,
						dataType: 'json',
						success: function(data) {
							if(data.code == 200) {
								vm.listtype = data.data
							}
						}
					})
				},
				getCallPolice(){
					$.ajax({
						type: 'get',
						url: this.httpurl + '/appWeb/getCallPolice/' + this.pid,
						dataType: 'json',
						success: function(data) {
							if(data.code == 200) {
								vm.form = data.data
								getLocation();
							}
						}
					})
				}
			}
		})

		function getLocation() {
			if(navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(showPosition, showError);
			} else {
				alert("浏览器不支持地理定位。");
			}
		}

		function showPosition(position) {
			console.log(position)
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;
			wgs84togcj02tobd09(lon, lat)

		}

		function wgs84togcj02tobd09(mglng, mglat) {
			const xPI = 3.14159265358979324 * 3000.0 / 180.0
			const PI = 3.1415926535897932384626
			const a = 6378245.0
			const ee = 0.00669342162296594323
			let z = Math.sqrt(mglng * mglng + mglat * mglat) + 0.00002 * Math.sin(mglat * xPI)
			let theta = Math.atan2(mglat, mglng) + 0.000003 * Math.cos(mglng * xPI)
			let bdlng = z * Math.cos(theta) + 0.0065
			let bdlat = z * Math.sin(theta) + 0.006
			// return [bdlng, bdlat]
			vm.form.lon = bdlng;
			vm.form.lat = bdlat;
		}
		function transformlat(lng, lat) {
			const PI = 3.1415926535897932384626
			let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
			ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
			ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
			ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
			return ret
		}

		function transformlng(lng, lat) {
			const PI = 3.1415926535897932384626
			let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
			ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
			ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
			ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
			return ret
		}

		function showError(error) {
			switch(error.code) {
				case error.PERMISSION_DENIED:
					alert("定位失败,用户拒绝请求地理定位");
					break;
				case error.POSITION_UNAVAILABLE:
					alert("定位失败,位置信息是不可用");
					break;
				case error.TIMEOUT:
					alert("定位失败,请求获取用户位置超时");
					break;
				case error.UNKNOWN_ERROR:
					alert("定位失败,定位系统失效");
					break;
			}
		}
		//验证手机号
		function iptchange(e) {
			//			console.log(e.value)
			if((/^1[3456789]\d{9}$/.test(e.value))) {
				$('.cd-popup-trigger').css('background', '#35a785')
			} else {
				$('.cd-popup-trigger').css('background', '#ccc')
			}
		}

		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return unescape(r[2]);
			return null;
		}
		window.onload = function() {
			/*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
			  为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
			getRem(720, 100);
		};
		window.onresize = function() {
			getRem(720, 100)
		};

		function getRem(pwidth, prem) {
			var html = document.getElementsByTagName("html")[0];
			var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
			html.style.fontSize = oWidth / pwidth * prem + "px";
		}
	</script>

</html>